<template>
  <div class="posttable">
    <el-row style="margin-bottom: 10px;">
      <el-col :span="24" style="padding-right: 30px;padding-left: 40px;margin-top: 10px;">
        <el-row>
          <el-col>
            <el-col style="width:20%;" class="bot">
              <el-row>
                <el-col>
                  <p class="title">入职公司</p>
                </el-col>
                <el-col>
                  <p class="text">{{info.company}}</p>
                </el-col>
              </el-row>
            </el-col>
            <el-col style="width:20%;" class="bot">
              <el-row>
                <el-col>
                  <p class="title">部门</p>
                </el-col>
                <el-col>
                  <p class="text">{{info.department}}</p>
                </el-col>
              </el-row>
            </el-col>
            <el-col style="width:20%;" class="bot">
              <el-row>
                <el-col>
                  <p class="title">服务客户</p>
                </el-col>
                <el-col>
                  <p class="text">{{info.customer}}</p>
                </el-col>
              </el-row>
            </el-col>
            <el-col style="width:20%;" class="bot">
              <el-row>
                <el-col>
                  <p class="title">职位</p>
                </el-col>
                <el-col>
                  <p class="text">{{info.position}}</p>
                </el-col>
              </el-row>
            </el-col>
            <el-col style="width:20%;" class="bot">
              <el-row>
                <el-col>
                  <p class="title">姓名</p>
                </el-col>
                <el-col>
                  <p class="text">{{info.name}}</p>
                </el-col>
              </el-row>
            </el-col>
          </el-col>
          <el-col>
            <el-col style="width:20%;" class="bot">
              <el-row>
                <el-col>
                  <p class="title">性别</p>
                </el-col>
                <el-col>
                  <p class="text">{{info.sex}}</p>
                </el-col>
              </el-row>
            </el-col>
            <el-col style="width:20%;" class="bot">
              <el-row>
                <el-col>
                  <p class="title">联系方式</p>
                </el-col>
                <el-col>
                  <p class="text">{{info.phone}}</p>
                </el-col>
              </el-row>
            </el-col>
            <el-col style="width:20%;" class="bot">
              <el-row>
                <el-col>
                  <p class="title">区域</p>
                </el-col>
                <el-col>
                  <p class="text">{{info.area}}</p>
                </el-col>
              </el-row>
            </el-col>
            <el-col style="width:20%;" class="bot">
              <el-row>
                <el-col>
                  <p class="title">毕业时间</p>
                </el-col>
                <el-col>
                  <p class="text">{{info.graduationTime | converTime("YYYY-MM-DD")}}</p>
                </el-col>
              </el-row>
            </el-col>
            <el-col style="width:20%;" class="bot">
              <el-row>
                <el-col>
                  <p class="title">入职时间</p>
                </el-col>
                <el-col>
                  <p class="text">{{info.entryTime | converTime("YYYY-MM-DD")}}</p>
                </el-col>
              </el-row>
            </el-col>
          </el-col>
          <el-col>
            <el-col style="width:20%;" class="bot">
              <el-row>
                <el-col>
                  <p class="title">离职时间</p>
                </el-col>
                <el-col>
                  <p class="text">{{info.depatureTime | converTime("YYYY-MM-DD")}}</p>
                </el-col>
              </el-row>
            </el-col>
            <el-col style="width:20%;" class="bot">
              <el-row>
                <el-col>
                  <p class="title">试用期</p>
                </el-col>
                <el-col>
                  <p class="text">{{info.probationPeriod}}</p>
                </el-col>
              </el-row>
            </el-col>
            <el-col style="width:20%;" class="bot">
              <el-row>
                <el-col>
                  <p class="title">补助</p>
                </el-col>
                <el-col>
                  <p class="text">{{info.subsidy}}</p>
                </el-col>
              </el-row>
            </el-col>
            <el-col style="width:20%;" class="bot">
              <el-row>
                <el-col>
                  <p class="title">薪资</p>
                </el-col>
                <el-col>
                  <p class="text">{{info.salary}}</p>
                </el-col>
              </el-row>
            </el-col>
            <el-col style="width:20%;" class="bot">
              <el-row>
                <el-col>
                  <p class="title">薪数</p>
                </el-col>
                <el-col>
                  <p class="text">{{info.salaryNum}}</p>
                </el-col>
              </el-row>
            </el-col>
          </el-col>
          <el-col>
            <el-col style="width:20%;" class="bot">
              <el-row>
                <el-col>
                  <p class="title">招聘专员</p>
                </el-col>
                <el-col>
                  <p class="text">{{info.recommender}}</p>
                </el-col>
              </el-row>
            </el-col>
            <el-col style="width:20%;" class="bot">
              <el-row>
                <el-col>
                  <p class="title">离职状态</p>
                </el-col>
                <el-col>
                  <p class="text">{{info.quitState }}</p>
                </el-col>
              </el-row>
            </el-col>
            <el-col style="width:20%;" class="bot">
              <el-row>
                <el-col>
                  <p class="title">离职原因</p>
                </el-col>
                <el-col>
                  <p class="text">{{info.quitReason}}</p>
                </el-col>
              </el-row>
            </el-col>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import axios from "axios";
  import qs from "qs";
  import moment from "moment";
  
  export default {
    name: "customerDetail",
    props: {
      detailCode: {
        type: Object
      },
      radio: {
        type: String
      }
    },
    data() {
      return {
        id: null,
        info: {}
      };
    },
    created() {
      this.id = this.detailCode.id;
      
      axios
        .post(this.url + "/entryquit/getDetail", {
          id: this.id + ""
        })
        .then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            if (res.data.data !== null) {
              this.info = res.data.data;
            }
          }
        });
    }
  };
</script>
<style scoped>
  .title {
    color: #757575;
    margin-bottom: 10px;
    font-size: 14px;
  }
  
  .text {
    color: #333333;
    font-weight: 700;
    font-size: 14px;
    word-break: break-all;
    white-space: pre-line;
  }
  
  .bot {
    margin-bottom: 30px;
  }
  
  .Line {
    border: 0.5px solid #e8e8e8;
    margin-bottom: 30px;
  }
  
  @media screen and (min-width: 1200px) and (max-width: 1900px) {
    .word {
      word-break: break-all;
      width: 200px;
    }
  }
</style>
